<template>
    <a-menu theme="light" :mode="msg">
        <a-sub-menu v-for="item in items" :key="item.id" :index="item.id">
            <template v-if="item.children">
                <span slot="title" style="display: flex;align-items: center;">
                    <a-icon :type="item.icon"/>
                    <span>{{ item.name }}</span>
                </span>
                <a-menu-item v-for="subItem in item.children" :key="subItem.id" :index="subItem.id">
                    <router-link :to="subItem.url">{{ subItem.name }}</router-link>
                </a-menu-item>
            </template>
            <template v-else>
                <span slot="title" style="display: flex;align-items: center;">
                    <a-icon :type="item.icon"/>
                    <span>{{ item.name }}</span>
                </span>
            </template>
        </a-sub-menu>
    </a-menu>
</template>

<script>
export default {
    name: "sysMenu",
    data() {
        return {
            items: []
        }
    },
    props: ["msg"],
    methods: {
        clickLink(path) {
            this.$router.push({
                path,
                query: {
                    t: new Date()
                }
            })
        }
    }
}
</script>

<style scoped>

</style>
